<template>
  <div style="width:auto;">
     <el-row :gutter="20" style="margin-bottom:20px">
      <el-col :span="8">
        <ve-gauge :data="normalGuageChartData" :settings="normalGuageChartSetting"></ve-gauge>
      </el-col>
      <el-col :span="8">
        <ve-gauge :data="specialChartData" background-color="#000" :settings="specialChartSettings"></ve-gauge>
      </el-col>
      <el-col :span="8">
        <ve-gauge :data="gaugeChartData3" :settings="gaugeChartSettings3"></ve-gauge>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom:20px">
      <el-col :span="12">
        <el-card>
          <ve-line :data="normalLineChartData" :settings="normalLineChartSettings"></ve-line>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <ve-line :data="converLineChartData" :settings="coverLineChartSettings"></ve-line>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <ve-wordcloud :data="wordCloudChartData" :setting="wordCloudChartSetting"></ve-wordcloud>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <ve-heatmap :data="heatMapChartData" :settings="heatMapChartSettings"></ve-heatmap>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
</style>

<script>
export default {
  data() {
    return {
      normalLineChartSettings: {
        metrics: ["下单用户"]
      },
      normalLineChartData: {
        columns: ["日期", "访问用户", "下单用户"],
        rows: [
          { 日期: "2018-05-22", 访问用户: 32371, 下单用户: 19810 },
          { 日期: "2018-05-23", 访问用户: 12328, 下单用户: 4398 },
          { 日期: "2018-05-24", 访问用户: 92381, 下单用户: 52910 }
        ]
      },
      coverLineChartSettings: {
        stack: { 用户: ["访问用户", "下单用户"] },
        area: true
      },
      converLineChartData: {
        columns: ["日期", "访问用户", "下单用户", "下单率"],
        rows: [
          { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      wordCloudChartData: {
        columns: ["word", "count"],
        rows: []
      },
      wordCloudChartSetting: {
        color: ["#ff0", "#00f", "#f00", "#0ff"],
        shape: "diamond",
        sizeMin: 30,
        sizeMax: 60
      },
      normalGuageChartData: {
        columns: ["type", "value"],
        rows: [{ type: "占比", value: 0.8 }]
      },
      normalGuageChartSetting: {
        dataType: {
          占比: "percent"
        },
        seriesMap: {
          占比: {
            min: 0,
            max: 1
          }
        }
      },
      specialChartData: {
        columns: ["type", "value"],
        rows: [
          { type: "速度", value: 60 },
          { type: "转速", value: 80 },
          { type: "油表", value: 6000 }
        ]
      },
      specialChartSettings: {
        dataName: {
          速度: "km/h",
          转速: "x1000 r/min",
          油表: "gas"
        },
        seriesMap: {
          速度: {
            min: 0,
            max: 220,
            splitNumber: 11,
            radius: "50%",
            axisLine: {
              lineStyle: {
                color: [[0.09, "lime"], [0.82, "#1e90ff"], [1, "#ff4500"]],
                width: 3,
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 15,
              lineStyle: {
                color: "auto",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            splitLine: {
              length: 25,
              lineStyle: {
                width: 3,
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            pointer: {
              shadowColor: "#fff",
              shadowBlur: 5
            },
            title: {
              textStyle: {
                fontWeight: "bolder",
                fontSize: 20,
                fontStyle: "italic",
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            detail: {
              backgroundColor: "rgba(30,144,255,0.8)",
              borderWidth: 1,
              borderColor: "#fff",
              shadowColor: "#fff",
              shadowBlur: 5,
              offsetCenter: [0, "50%"],
              textStyle: {
                fontWeight: "bolder",
                color: "#fff"
              }
            }
          },
          转速: {
            center: ["10%", "55%"],
            radius: "25%",
            min: 0,
            max: 7,
            endAngle: 45,
            splitNumber: 7,
            axisLine: {
              lineStyle: {
                color: [[0.29, "lime"], [0.86, "#1e90ff"], [1, "#ff4500"]],
                width: 2,
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: "auto",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                width: 3,
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            pointer: {
              width: 5,
              shadowColor: "#fff",
              shadowBlur: 5
            },
            title: {
              offsetCenter: [0, "-30%"],
              textStyle: {
                fontWeight: "bolder",
                fontStyle: "italic",
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            detail: {
              borderColor: "#fff",
              shadowColor: "#fff",
              shadowBlur: 5,
              width: 80,
              height: 30,
              offsetCenter: [25, "20%"],
              textStyle: {
                fontWeight: "bolder",
                color: "#fff"
              }
            }
          },
          油表: {
            center: ["84%", "50%"],
            radius: "30%",
            min: 0,
            max: 2,
            startAngle: 135,
            endAngle: 45,
            splitNumber: 2,
            axisLine: {
              lineStyle: {
                color: [[0.2, "lime"], [0.8, "#1e90ff"], [1, "#ff4500"]],
                width: 2,
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: "auto",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            axisLabel: {
              textStyle: {
                fontWeight: "bolder",
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              },
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "E";
                  case "1":
                    return "Gas";
                  case "2":
                    return "F";
                }
              }
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 3,
                color: "#fff",
                shadowColor: "#fff",
                shadowBlur: 10
              }
            },
            pointer: {
              width: 2,
              shadowColor: "#fff",
              shadowBlur: 5
            },
            title: {
              show: false
            },
            detail: {
              show: false
            }
          }
        }
      },
      gaugeChartData3: {
        columns: ["type", "value"],
        rows: [{ type: "speed", value: 60 }]
      },
      gaugeChartSettings3: {
        labelMap: {
          speed: "速度"
        },
        dataName: {
          speed: "km/h"
        }
      },
      heatMapChartData: {
        columns: ["lat", "lng", "人数"],
        rows: [
          { lat: 115.892151, lng: 28.676493, 人数: 1000 },
          { lat: 117.000923, lng: 36.675807, 人数: 400 },
          { lat: 113.665412, lng: 34.757975, 人数: 800 },
          { lat: 114.298572, lng: 30.584355, 人数: 200 },
          { lat: 112.982279, lng: 28.19409, 人数: 100 },
          { lat: 113.280637, lng: 23.125178, 人数: 300 },
          { lat: 110.33119, lng: 20.031971, 人数: 800 },
          { lat: 104.065735, lng: 30.659462, 人数: 700 },
          { lat: 108.948024, lng: 34.263161, 人数: 300 },
          { lat: 103.823557, lng: 36.058039, 人数: 500 }
        ]
      },
      heatMapChartSettings: {
        position: "china",
        type: "map",
        geo: {
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#323c48",
              borderColor: "#111"
            },
            emphasis: {
              areaColor: "#2a333d"
            }
          }
        }
      }
    };
  },
  created() {
    this.wordCloudChartData.rows = [
      {
        word: "visualMap",
        count: 22199
      },
      {
        word: "continuous",
        count: 10288
      },
      {
        word: "contoller",
        count: 620
      },
      {
        word: "series",
        count: 274470
      },
      {
        word: "gauge",
        count: 12311
      },
      {
        word: "detail",
        count: 1206
      },
      {
        word: "piecewise",
        count: 4885
      },
      {
        word: "textStyle",
        count: 32294
      },
      {
        word: "markPoint",
        count: 18574
      },
      {
        word: "pie",
        count: 38929
      },
      {
        word: "roseType",
        count: 969
      },
      {
        word: "label",
        count: 37517
      },
      {
        word: "emphasis",
        count: 12053
      },
      {
        word: "yAxis",
        count: 57299
      },
      {
        word: "name",
        count: 15418
      },
      {
        word: "type",
        count: 22905
      },
      {
        word: "gridIndex",
        count: 5146
      },
      {
        word: "normal",
        count: 49487
      },
      {
        word: "itemStyle",
        count: 33837
      },
      {
        word: "min",
        count: 4500
      },
      {
        word: "silent",
        count: 5744
      },
      {
        word: "animation",
        count: 4840
      },
      {
        word: "offsetCenter",
        count: 232
      },
      {
        word: "inverse",
        count: 3706
      },
      {
        word: "borderColor",
        count: 4812
      },
      {
        word: "markLine",
        count: 16578
      },
      {
        word: "line",
        count: 76970
      },
      {
        word: "radiusAxis",
        count: 6704
      },
      {
        word: "radar",
        count: 15964
      },
      {
        word: "data",
        count: 60679
      },
      {
        word: "dataZoom",
        count: 24347
      },
      {
        word: "tooltip",
        count: 43420
      },
      {
        word: "toolbox",
        count: 25222
      },
      {
        word: "geo",
        count: 16904
      },
      {
        word: "parallelAxis",
        count: 4029
      }
    ];
  },
  methods: {}
};
</script>